<template>
    <div>
        <input type="text" v-model="myVal">
        <ul>
          <li v-for="item in myList" :key="item.name">
            {{ item.name}} + {{item.price}}
            </li>
        </ul>
        <button @click="changeList">change</button>
    </div>
</template>
<script>
import Vue from 'vue'
export default {
  data () {
    return {
      myVal: '',
      myList: [
        {
          name: 'apple',
          price: 34
        },
        {
          name: 'banana',
          price: 50
        }
      ]
    }
  },
  // 事件监听
  watch: {
    myVal: function (val, oldVal) {
      console.log(val, oldVal)
    },
    myList: function () {
      this.tellUser()
    }
  },
  methods: {
    changeList () {
      Vue.set(this.myList, 1, {
        name: 'pinapple',
        price: 256
      })
      // this.tellUser()
    },
    removeItem () {
      // this.tellUser()
    },
    tellUser () {
      alert('list change')
    }
  }
}
</script>
